<template>
  <view>
    <uv-status-bar></uv-status-bar>
    <view class="userInfo" v-if="userToken?.token==null || !userToken?.token " @click="goLogin">
      <view class="login">[登录/注册]</view>
    </view>
    <view v-else class="userInfo">
      <text class="login">{{userToken.userInfo.user_name}}</text>
      <view v-if="userToken.userInfo.user_type==3" class="verify"><i class="iconfont icon-renzheng"></i>{{userToken.userInfo.user_verify}}</view>
      <view class="phone">{{phide(userToken.userInfo.user_phone)}}</view>
    </view>

    <view class="tools-item">

      <uv-grid :border="false" :col="3">
        <uv-grid-item v-for="(item,index) in toolsItem" :key="index" @click="goPage(item.url)">
          <uv-icon  :name="item.name" :size="34" color="#000"></uv-icon>
          <text class="grid-text">{{item.title}}</text>
        </uv-grid-item>
      </uv-grid>

    </view>
    <view class="tooks2-item">
      <uv-cell-group :border="false">
        <uv-cell icon="order" title="服务协议" url="/pages/user/webview?src=https://wz.mala.cn/wechatApi.Webview/xieyi" isLink :iconStyle="[{'color':'#409eff'}]" :border="true"  :cellStyle="cellStyle" size="large"></uv-cell>
        <uv-cell icon="edit-pen" title="留言流程" isLink url="/pages/user/webview?src=https://wz.mala.cn/wechatApi.Webview/liucheng"  :iconStyle="[{'color':'#409eff'}]" :border="true"  :cellStyle="cellStyle" size="large"></uv-cell>
        <uv-cell icon="question-circle" title="常见问题" isLink url="/pages/user/webview?src=https://wz.mala.cn/wechatApi.Webview/wenti"  :iconStyle="[{'color':'#409eff'}]" :border="true"  :cellStyle="cellStyle" size="large"></uv-cell>
        <uv-cell icon="info-circle" title="关于四川群众呼声" isLink  url="/pages/user/webview?src=https://wz.mala.cn/wechatApi.Webview/about" :iconStyle="[{'color':'#409eff'}]" :cellStyle="cellStyle" :border="false" size="large"></uv-cell>
      </uv-cell-group>
    </view>

    <view class="tooks2-item" v-if="userToken.token">
      <uv-button type="primary" text="退出" @click="logout"  size="large"></uv-button>
    </view>
    <xl-copyright></xl-copyright>
    <uv-safe-bottom></uv-safe-bottom>
  </view>
</template>

<script setup>
import {
  useToken
} from "@/stores/userStores";
const userToken = useToken();
console.log(userToken.token)
import {ref} from "vue"
const cellStyle = ref([{'padding':'30rpx'},{'fontSize':'36rpx'}])
const toolsItem = ref([
  {
    url:"/pages/user/mythread",
    name: "chat",
    title: "我的留言"
  },
  {
    name: "email",
    title: "我的消息"
  },
  {
    name: "eye",
    title: "浏览历史"
  },
])
const logout = () => {
  userToken.clearToken()
}
const phide = (phone) => {
  return phone?phone.substring(0, 3) + "****" + phone.substring(7, 11):''
}
const goLogin = () => {
  uni.navigateTo({
    url: '/pages/user/login'
  })
}
const goPage = (url) => {
  if(userToken.token=='' || userToken.token==null){
    //toast
    uni.showToast({
      title: "请先登录",
      icon:'none'
    })
    uni.navigateTo({
      url: '/pages/user/login'
    })
  }else{
    uni.navigateTo({
      url: url
    })
  }
}
</script>
<style scoped lang="scss">
.tooks2-item{
  background: #fff;
  margin:0 30rpx;
  padding:0 15rpx;
  border-radius: 10rpx;
  margin-top:30rpx;
}
.tools-item{
  background: #fff;
  margin:0 30rpx;
  padding:30rpx;
  border-radius: 10rpx;
  .grid-text{
    margin-top:12rpx;
    font-size:28rpx;
    color:#344;
  }
}
.userInfo {
  padding: 30px 15px;
  align-items: center;
  .verify{
    display: flex;
    align-items: center;
    font-size:28rpx;
    margin:10rpx 0;
    color:$baseColor;
  }
  .iconfont{
    color:$baseColor;
    font-size:40rpx;
  }
  .phone{
    color:#666;
    font-size:28rpx;
  }

  .avatar {
    width: 60px;
    height: 60px;
    border: 2px solid #fff;
    border-radius: 60px;
    margin-right: 15px;
  }

  .login {
    font-weight: bold;
    font-size: 28px;
    line-height: 40px;
    color: #344;
  }

  .user_type {
    color: #999;
  }
}
</style>
